<template>
  <div>
    <!-- btn 区域 -->
    <div class="btn">
      <el-button @click="deteletItem">删除</el-button>
      <el-button @click="exportToExcel ">导出--</el-button>
      <el-button @click="openDialogVisible">添加无产品项目</el-button>
    </div>
    <!-- table区域 -->
    <el-table
      id="table"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="productname" label="产品名称" width="180" />
      <el-table-column prop="address" label="单位" />
      <el-table-column prop="grouping" label="分组" />
      <el-table-column prop="type" label="类型" />
      <el-table-column prop="price" label="优惠价" />
      <el-table-column prop="number" label="数量" />
      <el-table-column prop="add" label="小计" />
      <el-table-column label="备注">
        <template slot-scope="scope">
          <input v-model="tableData.other" style="border: none">
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加区域 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-form label-width="100px" :model="formLabelAlign">
        <el-form-item label="产品名称">
          <el-input v-model="formLabelAlign.productname" />
        </el-form-item>
        <el-form-item label="单位">
          <el-input v-model="formLabelAlign.address" />
        </el-form-item>
        <el-form-item label="分组">
          <el-input v-model="formLabelAlign.grouping" />
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="formLabelAlign.type" />
        </el-form-item>
        <el-form-item label="优惠价">
          <el-input v-model="formLabelAlign.price" />
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="formLabelAlign.number" />
        </el-form-item>
        <el-form-item label="小计">
          <el-input v-model="formLabelAlign.add" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="formLabelAlign.other" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDataItem()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 这块是汇总 -->
    <!--  -->
    <el-table :data="tableList" style="width: 100%; margin: 20px;margin-top:100px">
      <el-table-column prop="type" label="费用类目" width="180" />
      <el-table-column prop="provide" label="提供方" />
      <el-table-column prop="price" label="小计" />
      <el-table-column label="折扣率">
        <template slot-scope="scope">
          <input v-model="scope.row.discount" style="border: none;width:30px" @input="change()">%
        </template>
      </el-table-column>
      <el-table-column label="优惠价" prop="orderPrice">
        <template slot-scope="scope">
          <span>{{ getPrice(scope.row) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          <input v-model="scope.row.other" style="border: none">
        </template>
      </el-table-column>

    </el-table>
    <div>*********</div>
    <div> 汇总:{{ sumPrice }}</div>
    <div> 优惠后的价格:{{ sumPrice }}</div>
  </div>
</template>
<script>
// import XLSX from 'xlsx'
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
console.log('引入进来了嘛0', XLSX)
export default {
  data() {
    return {
      dialogVisible: false,
      timer: null,
      labelPosition: 'right',
      deteletId: '',
      b: [],
      formLabelAlign: {
        productname: '',
        address: '',
        grouping: '',
        type: '',
        price: 0,
        number: 0,
        add: 0,
        other: ''
      },
      // 汇总的数据
      tableList: [],
      // 暂存表格的数据
      tableData: [
        { id: 1,
          productname: '机场起降费',
          address: '架次',
          grouping: '武汉天河机场',
          type: '运行保障',
          price: 4097,
          number: 1,
          add: 4097,
          other: ''
        },
        {
          id: 2,
          productname: '酒店隔离住宿餐费',
          address: '次',
          grouping: '广州白云机场',
          type: '包机',
          price: 0.2,
          number: 1,
          add: 0.2,
          other: ''
        },
        {
          id: 3,
          productname: 'service',
          address: '架次',
          grouping: '万里安产品',
          type: '货机保障',
          price: 1906,
          number: 1,
          add: 1906,
          other: ''
        },
        {
          id: 4,
          productname: '第三方测试',
          address: ' 次',
          grouping: '测试分组',
          type: '客运包机',
          price: 2.39,
          number: 1,
          add: 2.39,
          other: ''
        },
        {
          id: 5,
          productname: '停车场费用',
          address: '次',
          grouping: '武汉天河机场',
          type: '运行保障',
          price: 2685,
          number: 1,
          add: 2685,
          other: ''
        }
      ],
      text: []
    }
  },
  computed: {
    sumPrice() {
      const sumPricearr = []
      this.tableList.map((item) => {
        sumPricearr.push(item.price)
      })
      let a = 0
      if (sumPricearr.length > 0) {
        a = sumPricearr.reduce((s1, s2) => {
          s1 = s1 + s2
          return s1
        })
      }
      return a
    }

  },
  watch: {
  },
  mounted() {
    this.getIndex()
    this.filterOther()
  },
  methods: {

    exportToExcel() {
      const et = XLSX.utils.table_to_book(document.getElementById('table')) // 此处传入table的DOM节点
      const etout = XLSX.write(et, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(new Blob([etout], {
          type: 'application/octet-stream'
        }), 'trade-publish.xlsx') // trade-publish.xlsx 为导出的文件名
      } catch (e) {
        console.log(e, etout)
      }
      return etout
    },
    change() {
      clearInterval(this.timer)
      this.timer = setTimeout(() => {
      }, 500)
    },
    getPrice(item) {
      const a = item.price * item.number * item.discount / 100
      return a
    },
    filterOther() {
      const res = this.tableData.filter((item) => {
        return item.grouping !== '万里安产品'
      })
      // console.log('resss', res)
      const reslut = res.map((item) => {
        item.provide = '第三方'
        return item
      })
      console.log(reslut)
      new Set(reslut.map(item => {
        return item.type
      })).forEach(type => {
        const r = reslut.filter(item => { return item.type === type })
          .reduce((s1, s2) => {
            const obj = JSON.parse(JSON.stringify(s1))
            obj.price = s1.price + s2.price
            return obj
          })
        const obj = {}
        obj.type = r.type
        obj.provide = '第三方'
        obj.price = r.price
        obj.discount = 100
        obj.number = r.number
        // obj.onSale = r.price * r.number
        console.log('object :>> ', r)
        this.tableList.push(obj)
      })
    },
    getIndex() {
      const index = this.tableData.findIndex(item => item.grouping === '万里安产品')
      console.log(index)
      const WLA = this.tableData[index]
      const obj = {}
      obj.type = WLA.type
      obj.provide = WLA.grouping
      obj.price = WLA.price * WLA.number
      obj.number = WLA.number
      obj.discount = 100
      this.tableList.push(obj)
    },
    handleSelectionChange(selection) {
      // 当选择项发生变化时会触发该事件	selection
      console.log(selection)
      selection.forEach(item => {
        this.deteletId = item.id
      })
    },
    openDialogVisible() {
      this.dialogVisible = true
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    addDataItem() {
      console.log(this.formLabelAlign)
      //   这里实现需要去重，暂时先不写
      this.tableData.push(this.formLabelAlign)
      console.log('this.tableData', this.tableData)
      this.dialogVisible = false
    },
    deteletItem() {
      console.log(this.deteletId)
      const index = this.tableData.findIndex(item => item.id === this.deteletId)
      console.log(index)
      this.tableData.splice(index, 1)
    }
  }
}
</script>
<style>
.btn {
  display: flex;
  justify-content: space-between;
  margin: 50px;
}
</style>
